<template>
  <el-scrollbar
    class="scrollbar"
    @scroll.prevent
    style="width: 100%; height: 100%"
  >
    <div
      :style="{
        // height: height,
        'padding-left': '16px',
        '--theme': $store.getters.themeColor,
        'padding-right': '5px',
      }"
    >
      <!-- 标题 -->
      <!--    <div class="page-til">办理进度</div>-->
      <el-timeline :reverse="false">
        <el-timeline-item
          v-for="(time, index) in timeline"
          :key="index"
          placement="top"
          class="timeItem"
          style="position: relative"
        >
          <span
            style="
              position: absolute;
              top: 0px;
              line-height: 18px;
              color: #666;
              width: 130px;
            "
            >{{ time.flowNodeTime }}</span
          >
          <span
            class="text-style"
            :style="{
              position: 'absolute',
              top: '0px',
              right: '0px',
              'line-height': '18px',
              'font-weight': '500',
              color: time.ifCurrentLink == 1 ? '#1890FF' : '#303133',
            }"
            :title="time.linkName"
            >{{ time.linkName }}</span
          >
          <div
            class="d-card"
            style="margin-top: 20px"
            v-if="
              time.linkId != '6' && time.linkId != '7' && time.linkId != '0'
            "
          >
            <el-row>
              <el-col
                :span="18"
                v-if="time.linkId != '-1'"
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  height: 46px;
                "
              >
                <span
                  style="display: block"
                  class="spanStyle"
                  :title="time.processName == null ? '' : time.processName"
                >
                  办理人：
                  <span class="spanStyleValue">{{
                    time.processName == null ? "" : time.processName
                  }}</span>
                </span>
                <!-- <span style="display: block; margin-top: 15px"></span> -->
                <span style="display: block" class="spanStyle">
                  办理说明：
                  <span class="spanStyleValue">{{
                    time.remark == null ? "" : time.remark
                  }}</span>
                </span>
                <!-- <span style="display: block; color: #666;">{{
                  "办理说明：" + (time.remark == null ? "" : time.remark)
                }}</span> -->
              </el-col>
              <el-col
                :span="18"
                v-if="time.linkId == '-1'"
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  height: 46px;
                "
              >
                <span
                  style="display: block"
                  class="spanStyle"
                  :title="
                    viewDataSource.warningTypeName == null
                      ? ''
                      : viewDataSource.warningTypeName
                  "
                >
                  告警类型：
                  <span class="spanStyleValue">{{
                    viewDataSource.warningTypeName == null
                      ? ""
                      : viewDataSource.warningTypeName
                  }}</span>
                </span>
                <span style="display: block" class="spanStyle">
                  重要等级：
                  <span class="spanStyleValue">{{
                    viewDataSource.importanceLevelName == null
                      ? ""
                      : viewDataSource.importanceLevelName
                  }}</span>
                </span>
                <!-- <span style="display: block; color: #666;">{{
                  "重要等级：" +
                  (viewDataSource.importanceLevelName == null
                    ? ""
                    : viewDataSource.importanceLevelName)
                }}</span> -->
              </el-col>
              <el-col :span="6">
                <el-image :src="markFun(time)" v-if="markFun(time) != null">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
                <!--                <div style="background: green;width: 40px;height: 10px;float: right"></div>-->
              </el-col>
            </el-row>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-scrollbar>
</template>

<script>
import falseAlarm from "@/assets/image/linkProgress/falseAlarm-new.svg";
import alarm from "@/assets/image/linkProgress/alarm.svg";
import repAlarm from "@/assets/image/linkProgress/repAlarm.svg";
import finished from "@/assets/image/linkProgress/finished.svg";
import unfinished from "@/assets/image/linkProgress/unfinished.svg";
import redeploy from "@/assets/image/linkProgress/redeploy.svg";
import rollback from "@/assets/image/linkProgress/rollback.svg";
import accepted from "@/assets/image/linkProgress/accepted.svg";
import accept from "@/assets/image/linkProgress/need-accept.svg";
import "@/assets/font/iconfont.css";
import { DateFormat } from "@/utils/public";

export default {
  props: {
    timeline: {
      type: Array,
      default: [],
    },
    viewDataSource: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      activeNames: ["1"],
      imageMap: {
        1: {
          0: falseAlarm,
          1: alarm,
          2: alarm,
          4: alarm,
          defaultImage: alarm,
        },
        2: {
          1: alarm,
          defaultImage: alarm,
        },
        3: {
          1: alarm,
          defaultImage: alarm,
        },
        4: {
          0: alarm,
          1: alarm,
          2: alarm,
          defaultImage: alarm,
        },
        5: {
          0: alarm,
          1: alarm,
          2: alarm,
          defaultImage: alarm,
        },
      },
      flowLinkTypeMap: {
        // 0 正常流转  1  转派   2   回退
        1: redeploy,
        2: rollback,
      },
    };
  },
  methods: {
    // 查询研判名称
    linkName(linkId) {
      switch (linkId) {
        case "1":
          return "研判环节";
        case "2":
          return "调度环节";
        case "4":
          return "处置环节";
        case "5":
          return "核实环节";
        default:
          return "";
      }
    },
    markFun(item) {
      let linkId = item.realLinkType;
      if (item.status === "4") {
        return alarm;
      }
      if (item.enableAcceptanceMode === "2") {
        return accepted;
      }
      if (item.enableAcceptanceMode === "1") {
        return accept;
      }
      if (item.flowLinkType == "0" || item.flowLinkType == undefined) {
        if (this.imageMap[linkId]) {
          return this.imageMap[linkId][item.status]
            ? this.imageMap[linkId][item.status]
            : this.imageMap[linkId]["defaultImage"];
        }
      } else {
        return this.flowLinkTypeMap[item.flowLinkType];
      }

      return null;
    },
    timeStr(str) {
      return DateFormat.utcTimeToStrTime(str);
    },
    recordNameFun(item) {
      let name = "";
      switch (item.linkId) {
        case "-1":
          name = "备注";
          break; //上报
        case "0":
          name = "处理结果";
          break; //假警完结
        case "1":
          name = "研判说明";
          break; //研判环节
        case "2":
          name = "任务描述";
          break; //调度环节
        case "3":
          name = "处理结果";
          break; //认领环节
        case "4":
          name = "处置结果";
          break; //处置环节
        case "5":
          name = "核实说明";
          break; //核实环节
        case "6":
          name = "处理结果";
          break; //已完结
        case "7":
          name = "处理结果";
          break; //重复告警完结
      }
      return name + "：";
    },
  },
};
</script>

<style lang="scss" scoped>
$theme: var(--theme);
/deep/.timeItem .el-timeline-item__node {
  background-color: $theme;
}
/deep/.timeItem .el-timeline-item__tail {
  border-left: 1px solid #e4e4e4;
}
/deep/.timeItem .el-timeline-item__node--normal {
  width: 11px;
  height: 11px;
}
/deep/ .el-collapse {
  border: none;

  .el-collapse-item__wrap {
    border: none;
  }
}
/deep/ .el-collapse-item__header {
  // background: #ededed;
  font-size: 12px;
  height: 37px;
  border: none;
}

/deep/ .el-collapse-item__content {
  // background: #ededed;
  font-size: 12px;
  border: none;
  padding-bottom: 6px;
}

.d-card {
  // border-radius: 3px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0px 5px 6px 0px rgba(213, 210, 233, 0.6);
  border: 1px solid #f5f5f5;
  border-radius: 4px;
  height: 76px;
  /deep/.el-image {
    text-align: right;
    /deep/.el-image__inner {
      height: 52px;
      width: auto;
    }
  }
}

.d-card span {
  margin-right: 16px;
}

span {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}

.spanStyle {
  white-space: nowrap; /*强制span不换行*/
  overflow: hidden; /*超出宽度部分隐藏*/
  text-overflow: ellipsis; /*超出部分以点号代替*/
  color: #909399;
}
.spanStyleValue {
  color: #666666;
  white-space: nowrap; /*强制span不换行*/
  overflow: hidden; /*超出宽度部分隐藏*/
  text-overflow: ellipsis; /*超出部分以点号代替*/
}
.text-style {
  width: calc(100% - 168px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  //padding-right: 10px;
}
::v-deep .el-timeline {
  padding-top: 12px;
}
</style>
